<template>
    <div class="main-box-left">
                <div class="main-box-left-part1">
                    <div class="main-box-left-group">
                        <p>
                            <router-link to="/personal">我的全部</router-link>
                        </p>
                        <p>
                            <router-link to="/personal/order/status=0">我的预约</router-link>
                        </p>
                        <ul>
                            <li>
                                <router-link to="/personal/order/status=0">全部预约</router-link>
                            </li>
                            <li>
                                <router-link to="/personal/order/status=1">已完成</router-link>
                            </li>
                            <li>
                                <router-link to="/personal/order/status=2">未进行</router-link>
                            </li>
                            <li>
                                <router-link to="/personal/order/status=3">待评价</router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="main-box-left-group">
                        <p>
                            <router-link to="/personal/mycollect">我的收藏</router-link>
                        </p>
                        <ul>
                            <li>
                                <router-link to="/personal/mycollect">收藏的商家</router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="main-box-left-group">
                         <p>
                          <router-link to="/personal/myfootmark">我的足迹</router-link>
                        </p>
                        <p>
                            <router-link to="/personal/mycoupon">我的优惠券</router-link>
                        </p>
                    </div>
                    <div class="main-box-left-group">
                        <p>
                            <router-link to="/personal/information">个人信息</router-link>
                        </p>
                        <ul>
                            <li>
                                <router-link to="/personal/information">账号设置</router-link>
                            </li>
                            <li>
                                <router-link to="/personal/IDCard">实名认证</router-link>
                            </li>
                        </ul>
                    </div>
                    <div class="main-box-left-group" v-if="userinfo.permission === 'SHOPPER'">
                        <p>
                            <router-link to="/shoppersonal">我的店铺</router-link>
                        </p>
                    </div>
                </div>
    </div>
</template>

<script>
import jwtDecode from 'jwt-decode'
import cookie from '../../cookie/index'
export default {
    name:'MainBoxLeft',
    data() {
      return {
        userinfo:''
      }
    },
    methods:{
        getuser(){
           const user = jwtDecode(cookie.getToken());
           this.userinfo =user
        }
    },
    created(){
        this.getuser();
    }
}
</script>
<style lang="less" >
@navcolor: rgb(58, 58, 58);
@navfont: 13px;
@width: 1200px;
@hovercolor: #76d4ff;
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
li {
  list-style: none;
}
   .main-box-left {
      float: left;
      .main-box-left-part1 {
        display: inline-block;
        background: #ffffff;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        width: 230px;
        padding-bottom: 20px;
        .main-box-left-group {
          margin-top: -12px;
          padding: 20px;
          padding-bottom: 0px;
          p {
            margin: 12px 0;
            padding-left: 5px;
            a {
              font-size: 16px;
              color: black;
            }
            &:hover a {
              color: @hovercolor;
            }
          }
          ul {
            width: 100%;
            li {
              font-size: 14px;
              margin: 12px 0;
              padding-left: 5px;
              width: 100%;
              a {
                color: rgb(129, 129, 129);
              }
              i {
                float: right;
                margin-right: 20px;
                font-size: 10px;
                padding-top: 5px;
                color: #b9b9b9;
              }
            }
          }
        }
      }
    }
</style>
